<template>
  <div>
    <el-row>
      <el-col :span="24" style="margin-bottom: 10px;">
        <el-tag type="danger">欠费总额：{{amountOwedSum}}</el-tag>
        <el-tag style="margin-left: 10px;">预收款余额：{{amountRemaining}}</el-tag>
      </el-col>
      <el-col :span="24">
        <el-table :data="listData" v-if="listData.length > 0" height="300">
          <el-table-column label="房屋名称" align="left" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.communityName}}/{{scope.row.roomName}}</span>
            </template>
          </el-table-column>
          <!--<el-table-column label="收费项目" align="left" prop="chargeId" width="120" :formatter="itemFormat"/>-->
          <el-table-column label="收费标准" align="left" width="120" prop="normNames">
            <template slot-scope="scope">
              <span v-if="scope.row.projectId=='03'">{{itemFormat(scope.row)}}</span>
              <span v-else>{{scope.row.normNames}}</span>
            </template>
          </el-table-column>
          <el-table-column label="应收日期" align="center" prop="receivableTime" width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.receivableTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计费开始日期" align="center" prop="beginTime" width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.beginTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计费结束日期" align="center" prop="finishTime" width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="欠费金额" align="center" prop="amountOwed" width="100"/>
        </el-table>
        <el-empty v-else :image-size="50" description="无欠费记录">
        </el-empty>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {listRuleCost} from "@/api/payfee/ruleCost";
  import {getAmountRemaining} from "@/api/payfee/advanceReceipt";
  import { listItem } from "@/api/payfee/item";

  export default {
    name: "arrearageRecord",
    data() {
      return {
        //欠费列表
        listData: [],
        queryParams: {
          status: '10001',
          ownerId: null
        },
        //欠费总额
        amountOwedSum:0,
        //预收款余额
        amountRemaining:0,
        itemOptions:[], //收费项目
      }
    },
    watch: {
      customForm() {
        this.initForm()
      }
    },
    created() {
      this.initForm()
      listItem().then(res=>{
        this.itemOptions = res.rows;
      })
    },
    methods: {
      initForm() {
        this.amountOwedSum = 0
        this.queryParams.ownerId = this.customForm.customId || -1
        listRuleCost(this.queryParams).then(res => {
          this.listData = res.rows
          this.listData.forEach((row) => {
            this.amountOwedSum=this.amountOwedSum+Number(row.amountOwed)
          })
        })

        getAmountRemaining({ownerId:this.customForm.customId}).then(res=>{
          this.amountRemaining = res.data||0
        })
      },
      // 收费项目字典翻译
      itemFormat(row) {
        let index = this.itemOptions.findIndex(x=>x.chargeId == row.chargeId);
        if(index != -1){
          return this.itemOptions[index].chargeName
        }
        return '';
      },
    },
    props: {
      customForm: {
        type: Object,
        default: () => {
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    background-color: #f2f2f2 !important;
  }

</style>
